<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Gadget Test</title>
	
	<style type="text/css" media="screen">
	#img_area{
	  width: 793px;
	  height: 245px;
	}
	#menu_bar{
	  width: 793px;
	  height: 40px;
	  text-align: center;
	}
	.button{
	  display: table-cell;
	  float: left;
	  width: 198px;
	  height: 40px;
	  background-color: black;
	  color: white;
	}
	.overlay{
	  position: relative;
	  opacity: 0;
	}
	</style>
</head>
<body>

  <div id="img_area">
    <img id="background" src="https://sites.google.com/a/dcsnetlink.com/testsite---walter/home/pauls_front.jpg">
	<img id="image_1" class="overlay" style="top:-250px;" src="http://www.paulssheetmetal.com/wp-content/themes/versatile/images/hvac_banner.jpg">
	<img id="image_2" class="overlay" style="top:-500px;" src="http://www.paulssheetmetal.com/wp-content/themes/versatile/images/commercial_roofing.jpg">
	<img id="image_3" class="overlay" style="top:-750px;" src="http://www.paulssheetmetal.com/wp-content/themes/versatile/images/sheetmetal_banner.jpg">
	<img id="image_4" class="overlay" style="top:-1000px;" src="http://www.paulssheetmetal.com/wp-content/themes/versatile/images/crane_banner.jpg">
  </div>
  <div id="menu_bar">
    <div id="1" class="button">HVAC</div>
	<div id="2" class="button">ROOFING</div>
	<div id="3" class="button">SHEET METAL FABRICATION</div>
	<div id="4" class="button">CRANE RENTAL</div>
  </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(".button").hover(
	  function() {
	    var name = $(this).attr("id");
	    $("#image_" + name).fadeTo("normal", 1);
	  }, function() {
	    var name = $(this).attr("id");
	    $("#image_" + name).fadeTo("normal", 0);
	  }
	);
  </script>
</body>
</html>